<template>
<!--    第一节课 reactive ref toRefs toRef-->
    <div class="reactive-ref-toRefs">
        <!--        {{num}}-->
        <!--        {{total.num}}-->
        {{num}}
    </div>
</template>

<script>
    // import {ref} from 'vue';
    // import {reactive} from 'vue';
    // import {ref, reactive} from 'vue';
    // import {toRefs, reactive} from 'vue'
    // import {toRef, reactive} from 'vue';
    export default {
        name: 'reactive-ref-toRefs',
        setup() {
            // let num = ref('1');
            // setTimeout(() => {
            //     num.value++;
            // }, 1000);
            // console.log(num);
            // return {
            //     num
            // }

            // // reactive 方法
            // let total = reactive({
            //     num: 0
            // });
            // setTimeout(() => {
            //     total.num++;
            // }, 1000);
            // // 响应式，return内单独赋值不具有相应是 return｛num: total.num｝
            // return {
            //     total
            // }

            // ref 与reactive结合
            // let num = ref(0);
            // let state = reactive({
            //     num: num
            // });
            // setTimeout(() => {
            //     state.num++;
            // },1000)
            // return {num}

            // toRef toRefs
            // const state = reactive({
            //     num: 0
            // });
            // const {num} = toRefs(state);
            //
            // setTimeout(() => {
            //     state.num++;
            // },1000)
            // return {num}

            // const state = reactive({
            //     num: 0,
            //     num1: 2
            // });
            // const {num} = toRefs(state);

            // setTimeout(() => {
            //     state.num++;
            // },1000)
            // return toRefs(state)

            // toRef
            // const state = reactive({
            //     num: 0
            // });
            // const num = toRef(state, 'num');
            //
            // setTimeout(() => {
            //     state.num++;
            // }, 1000)
            // return {num}

        }
    };
</script>

<style scoped>

</style>
